<template>
    <view class="container">
        <!-- @scrolltolower="scrolltolower" -->
            <view>
                <view class="tab-radius">
                    <tab-radius
                        :list="['统计分析', '保单列表','加减保']"
                        :active="payIndex"
                        @change="onPayTab"
                        divided="100%"
                    />
                </view>
                <!-- 详细订单 -->
                <view class="record-list" :key="1">
                    <recharge  :payIndex="payIndex" />
                </view>

                <!-- 销售记录 -->
                <view class="operate-box" v-show="payIndex == 0" :key="0">
                    <!-- 保险数据模块 -->
                    <view class="bosom">
                        <view class="vendition insurance-data">保险数据</view>
                        <view class="align-flex fatalism-row">
                            <picker @change="bindPickerChange"  :range="longCompanyName">
                              <view class="fatalism align-flex">
                              <view class="uni-input">{{longCompanyName[sortIndex] || '暂无' }}</view>
                                <image
                                  class="fatalism-dropdown"
                                  src="/static/achievement-reports-form/dropdown.png"
                                />
                              </view>
                            </picker>

                            <picker @change="bindPickerChangeMethod" :value="sortIndexMethod" :range="LongPlanInfoName">
                              <view class="fatalism align-flex fatalism-margin">
                              <view class="uni-input">{{LongPlanInfoName[sortIndexMethod]}}</view>
                                <image
                                  class="fatalism-dropdown"
                                  src="/static/achievement-reports-form/dropdown.png"
                                />
                              </view>
                            </picker>
                              <picker @change="bindPickerChangePlan" :value="datePlan" :range="longInsurancePlanPlanName">
                                <view class="fatalism align-flex">
                                <view class="uni-input input-hidden">{{longInsurancePlanPlanName[datePlan]}}</view>
                                  <image
                                    class="fatalism-dropdown"
                                    src="/static/achievement-reports-form/dropdown.png"
                                  />
                                </view>
                              </picker>
                            <view class="align-flex fatalism-margin">
                              <poput-time :list='operateDataTwo' :default="operateIndexCustom" @cancel="bindPickerChangeOperateCustom"/>
                            </view>
                        </view>
                      <view class="box-list align-flex">
                        <view class="block-box-i">
                          <view class="title">总保费</view>
                          <view class="num">¥{{longAllCountData?.periodPremiumCount}}</view>
                        </view>
                        <view class="block-box-i block-box-i-left">
                          <view class="title">返利</view>
                          <view class="num">¥{{longAllCountData?.rebateAmountCount}}</view>
                        </view>
                      </view>
                      <view class="block-box-i block-box-i-active">
                            <view class="title">业绩保费（ *注：业绩保费=总保费-返利；返利：每月返利给符合条件的公司）</view>
                            <view class="num">¥{{longAllCountData?.achievementAmount}}</view>
                        </view>
                    </view>
                    <!-- 运营数据模块 -->
                    <view class="bosom">
                        <view class="row">
                            <view class="vendition">其他数据</view>
								<picker @change="bindPickerChangeAll" :value="sortIndexAll" :range="longCompanyNameAll">
                  <view class="fatalism align-flex">
                  <view class="uni-input">{{longCompanyNameAll[sortIndexAll] || '暂无'}}</view>
                    <image
                      class="fatalism-dropdown"
                      src="/static/achievement-reports-form/dropdown.png"
                    />
                  </view>
								</picker>

                        </view>
                        <view class="box-list align-flex">
                            <view class="block-box-i">
                                <view class="title">在保总人数</view>
                                <view class="num">{{longOhterInfo?.countAllEnsureStaff ?? 0}}</view>
                                <view class="parallel align-flex">
                                    <view class="contrast">比昨天</view>
                                    <view :class="['ratio',longOhterInfo?.countAllEnsureStaff - longOhterInfo?.countAllEnsureStaffYesterday >= 0? 'variety' : '']">{{longOhterInfo?.countAllEnsureStaff - longOhterInfo?.countAllEnsureStaffYesterday}}</view>
                                </view>
                            </view>
                            <view class="block-box-i block-box-i-left">
                                <view class="title">明日加保</view>
                                <view class="num">{{longOhterInfo?.tomorrowEnsure ?? 0}}</view>
                                <view class="parallel align-flex">
                                    <view class="contrast">今日</view>
                                    <view :class="['ratio',longOhterInfo?.todayEnsure >= 0? 'variety' : '']">{{longOhterInfo?.todayEnsure}}</view>
                                </view>
                            </view>
                        </view>
                        <view class="box-list align-flex">
                            <view class="block-box-i">
                                <view class="title">今日减保</view>
                                <view class="num">{{longOhterInfo?.todayTerminalEnsure ?? 0}}</view>
                                <view class="parallel align-flex">
                                    <view class="contrast">昨日</view>
                                    <view :class="['ratio',longOhterInfo?.yesterdayTerminalEnsure >= 0? 'variety' : '']">{{longOhterInfo?.yesterdayTerminalEnsure}}</view>
                                </view>
                            </view>
                            <view class="block-box-i block-box-i-left">
                                <view class="title">今日报案</view>
                                <view class="num">{{longOhterInfo?.todayReport ?? 0}}</view>
                                <view class="align-flex">
                                    <view class="parallel align-flex">
                                        <view class="contrast">昨日</view>
                                        <view :class="['ratio',longOhterInfo?.yesterdayReport >= 0? 'variety' : '']">{{longOhterInfo?.yesterdayReport}}</view>
                                    </view>
                                    <view class="parallel-entire align-flex">
                                        <view class="contrast">全部</view>
                                        <view :class="['ratio',longOhterInfo?.allReport >= 0? 'variety' : '']">{{longOhterInfo?.allReport}}</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- 运营数据模块 -->
                    <view class="bosom">
                        <view class="row">
                            <view class="vendition">运营数据</view>
                            <view class="align-flex">
                              <poput-time :list='operateData' :default="operateIndex" @cancel="bindPickerChangeOperate"  noCustom="true" />
                            </view>
                        </view>
                        <view class="box-list align-flex">
                            <view class="block-box-i">
                                <view class="title">开通客户</view>
                                <view class="num">{{longOperateInfo?.openCount}}</view>
                            </view>
                            <view class="block-box-i block-box-i-left">
                                <view class="title">充值金额（元）</view>
                                <view class="num">¥{{longOperateInfo?.rechargeAmount}}</view>
                            </view>
                        </view>
                        <view class="box-list align-flex">
                            <view class="block-box-i">
                                <view class="title">充值客户数</view>
                                <view class="num">{{longOperateInfo?.rechargeCustomers}}</view>
                            </view>
                            <view class="block-box-i block-box-i-left">
                                <view class="title">充值并使用的客户数</view>
                                <view class="num">{{longOperateInfo?.rechargeAndUse}}</view>
                            </view>
                        </view>
                    </view>
                    <!-- 饼图模块 -->
                    <view class="bosom">
                        <view class="row">
                            <view class="vendition">风险类别统计</view>
                        </view>
                        <view class="row row-type">
                          <tab-capsule class="at-type" :list="['按人数', '按金额']" :active="atType" @change="typeSwitch" />
                        <!-- <view class="jamb interval align-flex">
                            <view :class="[ atType==0? 'amount':'','sum']" @click="typeSwitch(0)">按人数</view>
                            <view :class="[ atType==1? 'amount':'', 'sum']"  @click="typeSwitch(1)">按金额</view>
                        </view> -->
                              <picker mode="date" fields="month" :value="date" @change="bindDateChange">
                                <view class="screen-i">

                                {{date}}<image
                                class="drop-down"
                                src="@/static/drop-down.png"
                                mode="scaleToFill"
                              />
                                </view>
                                </picker>
                            </view>
                      <!--0是按人数饼图-->
                      <view v-if="atType == 0">
                        <view class="operate-chart">
                          <qiun-data-charts
                            canvas2d
                            canvasId="operate-charts-three"
                            class="qiun-data-charts"
                            type="ring"
                            :opts="optsRing"
                            :chartData="chartsDataPie1"
                          />
                        </view>
                        <view class="operate-table">
                          <view class="table-title row">
                            <view class="title">风险类别</view>
                            <view class="title">人数</view>
                            <view class="title">占比</view>
                          </view>
                          <view class="table-cell row" v-for="(item,index) in getLongStatisticsInfo" :key="index">
                            <view class="cell cell-active">
                              <view class="colour-block"  :style="{background:item.color}"></view>
                              {{item.title}}
                            </view>
                            <view class="cell">{{item.people}}人</view>
                            <view class="cell">{{((item.people/item.total).toString() == 'NaN' ? 0 : item.people/item.total * 100).toFixed(2) + '%'}}</view>
                          </view>
                        </view>
                      </view>
                      <!--1是按金额饼图-->
                      <view v-if="atType == 1">
                        <view class="operate-chart">
                          <qiun-data-charts
                            canvas2d
                            canvasId="operate-charts-ring"
                            class="qiun-data-charts"
                            type="ring"
                            :opts="optsRingTwo"
                            :chartData="chartsDataPieTwo"
                          />
                        </view>
                        <view class="operate-table">
                          <view class="table-title row">
                            <view class="title">风险类别</view>
                            <view class="title">金额</view>
                            <view class="title">占比</view>
                          </view>
                          <view class="table-cell row" v-for="(item,index) in longAtMoneyInfo" :key="index">
                            <view class="cell cell-active">
                              <view class="colour-block"   :style="{background:item.color}"></view>
                              {{item.title}}
                            </view>
                            <view class="cell">{{item.money}}元</view>
                            <view class="cell">{{((item.money/item.total).toString() == 'NaN' ? 0 : item.money/item.total * 100).toFixed(2) + '%'}}</view>
                          </view>
                        </view>
                      </view>
                      </view>

                    <!-- 近7日开通趋势图表模块 -->
                    <view class="bosom">
                        <view class="row vendition-row">
                            <view class="vendition">近7日加减保趋势</view>
                            <view class="align-flex">
                            <view class="jamb-add align-flex">
                                <view class="graphic"></view>
                                <view class="dredge dredge-left">加保人数</view>
                            </view>
                            <view class="jamb-add align-flex">
                                <view class="graphic reduce-color"></view>
                                <view class="dredge">减保人数</view>
                            </view>
                            </view>
                        </view>
                        <view class="charts-box">
                            <no-data v-show="chartDataAdd.series[0].data.length === 0 && chartDataAdd.series[1].data.length === 0" />
                            <qiun-data-charts
                                v-show="chartDataAdd.series[0].data.length && chartDataAdd.series[1].data.length"
                                canvas2d
                                canvasId="operate-charts-two"
                                type="column"
                                :opts="opts"
                                :chartData="chartDataAdd"
                            />
                        </view>
                    </view>
                    <!-- 近7日开通趋势图表模块 -->
                    <view class="bosom">
                        <view class="row trend-row">
                            <view class="vendition">近7日开通趋势</view>
                            <view class="jamb align-flex">
                                <view class="graphic"></view>
                                <view class="dredge">开通数</view>
                            </view>
                        </view>
                        <view class="charts-box">
                            <no-data v-if="chartData.series[0].data.length === 0"/>
                            <qiun-data-charts
                                 v-show="chartData.series[0].data.length"
                                canvas2d
                                canvasId="operate-charts-one"
                                type="column"
                                :opts="opts"
                                :chartData="chartData"
                            />
                        </view>
                    </view>
                </view>
            </view>
            <view class="record-list" :key="2">
              <addSubtract  :payIndex="payIndex" />
            </view>
    </view>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import tabRadius from '@/components/tab-radius/tab-radius.vue'
import uchartsOpts from '@/utils/ucharts'
import recharge from '@/packageQuick/pages/long-term-protection/recharge/recharge.vue'
import addSubtract from '@/packageQuick/pages/long-term-protection/add-subtract/add-subtract.vue'
import poputTime from '@/components/popup-custom-time/popup-custom-time'
import tabCapsule from '@/components/tab-capsule/tab-capsule.vue'
import noData from '@/components/no-data/no-data.vue'

import {
    getDredgeCurrent,
    getLongAllCount,
    getLongAtMoney,
    getLongCompany,
    getLongInsurancePlan,
    getLongOhterData,
    getLongOpenTrend,
    getLongOperateData,
    getLongPlanData,
    getLongStatistics,
    getLongTrend
} from '@/api/quick'
import user from '@/utils/user'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { chartDataAdds, chartDatas, chartsDataPies, chartsDataPiesTwo, opt } from '@/utils/uchartsTwo'
const chartsDataColumn1 = ref({})

/* ucharts柱状图操作图表 */
const chartData = ref(chartDatas)

const chartDataAdd = ref(chartDataAdds)

const longCompanyName = ref([])
const longCompanyNameAll = ref([])
// 保险数据  昨天、明天、本周、本月、自定义
const itemRangeTwo = ref('' as string | undefined)
const operateIndexCustom = ref(3)
const operateDataTwo = ref(['昨天', '今天', '本周', '本月', '上月'])
const itemRangeFive = ref()
const itemRangeSix = ref()

const opts = ref(opt)
/* 饼图数据按人数模块 */
const chartsDataPie1 = ref(chartsDataPies)

/* 饼图数据按金额模块 */
const chartsDataPieTwo = ref(chartsDataPiesTwo)

/* 全部保险公司 全部保险公司 弹窗 */
const sortIndexAll = ref(0)
// const otherDataType = ref('')
// const sortArray = ref(['全部保司', '按投保时间正序', '按保费降序', '按保费升序'])
const bindPickerChangeAll = async function (e: { detail: { value: string } }) {
    sortIndexAll.value = Number(e.detail.value)
    // insuranceDetail()
    console.log(
        sortIndexAll.value,
        'sortIndexAllsortIndexAllsortIndexAll发生改变'
    )
    //   otherDataType.value = longinsurCompany.value[sortIndexAll.value]
    await longOhterData()
}

const payIndex = ref(0)
const optsRing = ref(uchartsOpts.optsRing)
const optsRingTwo = ref(uchartsOpts.optsRing)
const sortIndex = ref(0)
// tab发薪胶囊回调
const onPayTab = (index: number) => {
    payIndex.value = index
    if(payIndex.value == 1){
      uni.$emit('onCallBack')
    } else if (payIndex.value == 2) {
      uni.$emit('onCallBack2')
    }
}

onReachBottom(() => {
    if (payIndex.value == 1) {
        uni.$emit('onReachBottom')
    } else if (payIndex.value == 2) {
      uni.$emit('onReachBottom2')
    }
})

// 获取长期保保司

// 长期保方案类型
const longinsurCompany = ref([] as string[])
const longCompany = async () => {
    const result = await getLongCompany()
    console.log(result, '获取长期保保司')
    longCompanyName.value = result.map(
        (item: { insurCompany: string; name: string }, company: string) => {
            return item.name
        }
    )
    console.log(longCompanyName.value, 'longCompanyName.value')
    longinsurCompany.value = result.map(
        (
            item: { insurCompany: string; name: string },
            insurCompany: string
        ) => {
            return item.insurCompany
        }
    )
    longinsurCompany.value.unshift('')

    longCompanyNameAll.value = result.map(
        (item: { insurCompany: string; name: string }, company: string) => {
            return item.name
        }
    )
    longCompanyNameAll.value.unshift('全部保险公司')
    longCompanyName.value.unshift('全部保司')
    // longinsurCompany.value.unshift('全部保险公司')
    console.log(longinsurCompany.value, '获取长期保保司类型')
    console.log(longCompanyNameAll.value, '全部保险公司.value')
}

// 长期保投保方式数据
const LongPlanInfo = ref([] as { insuranceMethod: string; metho: string }[])

const LongPlanInfoName = ref([] as string[])
const LongPlanInfoType = ref([] as any[])
// 长期保投保方式
const LongPlanData = async () => {
    const result = await getLongPlanData()
    console.log(result, '长期保投保方式')
    LongPlanInfo.value.push(...result)
    console.log(LongPlanInfo.value, '长期保投保方式11111')
    LongPlanInfoName.value = LongPlanInfo.value.map(
        (item: { insuranceMethod: string; metho: string }) => {
            return item.insuranceMethod
        }
    )

    LongPlanInfoName.value.unshift('全部方式')
    LongPlanInfoType.value = LongPlanInfo.value.map(
        (item: { insuranceMethod: string; metho: boolean | string }) => {
            return item.metho === false ? 0 : 1
        }
    )
    LongPlanInfoType.value.unshift('')
    // console.log(LongPlanInfoType.value[0], '1111111111111', LongPlanInfoType.value[1], '66666666666666666666666666666666666666')
}

// 获取长期保保险方案数据
const longInsurancePlanPlanName = ref([] as string[])
const longInsurancePlanPlanType = ref([] as string[])
// 获取长期保保险方案
const longInsurancePlan = async () => {
    const result = await getLongInsurancePlan()
    console.log(result, '获取长期保保险方案11111')
    longInsurancePlanPlanName.value = result.map(
        (
            item: {
                insurCompanyPlanCode: string
                insurCompanyPlanName: string
            },
            company: string
        ) => {
            return item.insurCompanyPlanName
        }
    )
    longInsurancePlanPlanType.value = result.map(
        (
            item: {
                insurCompanyPlanCode: string
                insurCompanyPlanName: string
            },
            company: string
        ) => {
            return item.insurCompanyPlanCode
        }
    )

    longInsurancePlanPlanName.value.unshift('全部方案')
    longInsurancePlanPlanType.value.unshift('')
    console.log(longInsurancePlanPlanName.value, '获取长期保保险方案名字')
    console.log(longInsurancePlanPlanType.value, '获取长期保保险方案类型')
}

// 总保费数据
const longAllCountData = ref()
const startTime = ref('')
const endTime = ref('')
// 总保费
const longAllCount = async () => {
    console.log('打印打印了吗')
    const result = await getLongAllCount({
        insurCompany: longinsurCompany.value[sortIndex.value] || '',
        insurCompanyPlanCode:
        longInsurancePlanPlanType.value[datePlan.value] || '',
        startTime: operateIndex.value > 1000 ? itemRangeFive.value : startTime.value,
        endTime: operateIndex.value > 1000 ? itemRangeSix.value : endTime.value,
        insuranceMethod: Number(sortIndexMethod.value) === 0 ? '' : (sortIndexMethod.value - 1)
    })
    console.log(result, '总保费')
    longAllCountData.value = result
}

// 其他数据数据
const longOhterInfo = ref()
// 其他数据
const longOhterData = async () => {
    const result = await getLongOhterData({
        insurCompany:
            longinsurCompany.value[sortIndexAll.value] === '0'
                ? ''
                : longinsurCompany.value[sortIndexAll.value] || ''
    })
    console.log(result, '其他数据')
    longOhterInfo.value = result
}

// 运营数据数据
const longOperateInfo = ref({})
// 运营数据
const longOperateData = async () => {
    const result = await getLongOperateData({
        startTime: startTime.value,
        endTime: endTime.value
    })
    console.log(result, '运营数据')
    longOperateInfo.value = result
}

const atType = ref(0)
const typeSwitch = (e: number) => {
    atType.value = e
}
// 风险类别统计（按人数）数据
const getLongStatisticsInfo = ref()
// 风险类别统计（按人数）
const longStatistics = async () => {
    const result = await getLongStatistics({
        queryMonth: dateTwo.value
    })
    console.log(result, '风险类别统计（按人数）')
    getLongStatisticsInfo.value = result
    chartsDataPie1.value.series[0].data = result.map(
        (item: { people: number; title: string }) => {
            return {
                name: item.title,
                value: item.people,
                ...item
            }
        }
    )
}

// 风险类别统计（按金额）数据
const longAtMoneyInfo = ref()
// 风险类别统计（按金额）
const longAtMoney = async () => {
    const result = await getLongAtMoney({
        queryMonth: dateTwo.value
    })
    console.log(result, '风险类别统计（按金额）')
    longAtMoneyInfo.value = result

    chartsDataPieTwo.value.series[0].data = result.map((item: { money: number; title: string }) => {
        return {
            name: item.title,
            value: item.money,
            ...item
        }
    })
}

// 近7日加减保趋势数据
const longTrendInfo = ref()
// 近7日加减保趋势
const longTrend = async () => {
    const result = await getLongTrend()
    console.log(result, '近7日加减保趋势')
    longTrendInfo.value = result

    // resAdd.value.categories = result.date
    chartDataAdd.value.series[0].data = result.add.map(
        (item: string, index: number) => {
            return {
                value: item
            }
        }
    )

    chartDataAdd.value.series[1].data = result.reduce.map(
        (item: string, index: number) => {
            return {
                value: item
            }
        }
    )

    chartDataAdd.value.categories = result.date.map((item: string, index: number) => {
        return item.split('-')[1] + '/' + item.split('-')[2]
    })
}

// // 近7日开通趋势数据
// const longOpenTrendInfo = ref()
// 近7日开通趋势
const longOpenTrend = async () => {
    const result = await getLongOpenTrend()
    console.log(result, '近7日开通趋势')
    // longOpenTrendInfo.value = result

    chartData.value.series[0].data = result.openQuantity.map(
        (item: any, index: number) => {
            return {
                value: item
            }
        }
    )
    console.log(chartData.value, 'res.value')

    // res.value.series[0].data = result.openCount
    chartData.value.categories = result.day.map((item: string, index: number) => {
        return item.split('-')[1] + '/' + item.split('-')[2]
    })
    console.log(result.openCount, '数据格式是怎么样的')
}

/* 全部保司 全部保司 弹窗 */

// const sortArray = ref(['全部保司', '按投保时间正序', '按保费降序', '按保费升序'])
const bindPickerChange = async function (e: { detail: { value: string } }) {
    sortIndex.value = Number(e.detail.value)
    // insuranceDetail()
    console.log(sortIndex.value, 'sortIndex发生改变')
    await longAllCount()
}

/* 全部方式 全部方式 弹窗 */
const sortIndexMethod = ref(0)
const bindPickerChangeMethod = async function (e: any) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    sortIndexMethod.value = e.detail.value
    await longAllCount()
}

// 月份部分
const getCurrentMonth = () => {
    const date = new Date()
    const year = date.getFullYear()
    let month = date.getMonth() + 1
    month = month > 9 ? month : '0' + month
    return `${year}-${month}`
}

const date = ref(
    getCurrentMonth().substring(0, 4) +
        '年' +
        getCurrentMonth().substring(5, 8) +
        '月'
)
const dateTwo = ref(getCurrentMonth())
const bindDateChange = async function (e: any) {
    console.log(e.target.value, '11111111111112')
    const time =
        e.target.value.substring(0, 4) +
        '年' +
        e.target.value.substring(5, 8) +
        '月'
    console.log(time, 'yearyearyearyear')
    date.value = time
    console.log(e.target.value, '1111111111111')
    console.log(date, 'datedate')
    dateTwo.value = e.target.value
    // MethodStatistics()
    if (atType.value === 0) {
        await longStatistics()
    } else {
        await longAtMoney()
    }
}

// 保险方案 变量
const datePlan = ref(0)
// const insuranceDate = ref(['100万'] as string[])
// 改变保险方案事件
const bindPickerChangePlan = async (e: any) => {
    datePlan.value = e.detail.value
    console.log('picker发送选择改变，携带值为', e.detail.value)
    await longAllCount()
}

// 运营数据  昨天、明天、本周、本月、自定义
const itemRange = ref('' as string | undefined)
const operateIndex = ref(4)
const operateData = ref(['全部', '昨天', '今天', '本周', '本月', '上月'])
const itemRangeThree = ref('')
const itemRangeFour = ref('')
const bindPickerChangeOperate = async (
    index: number,
    time: undefined | string
) => {
    console.log(index, 'operateData')
    //   console.log(e.detail, 'e.detail')
    operateIndex.value = index.index
    itemRange.value = index.time
    startTime.value = index.startTime
    endTime.value = index.endTime
    await longOperateData()
}

const bindPickerChangeOperateCustom = async (
    index: number,
    time: undefined | string
) => {
    console.log(index, 'operateData')
    //   console.log(e.detail, 'e.detail')
    operateIndexCustom.value = index.index
    itemRangeTwo.value = index.time
    if (index.index === 1000) {
        itemRangeFive.value = itemRangeTwo.value.substring(0, 10)
        itemRangeSix.value = itemRangeTwo.value.substring(13, 23)
    } else {
        startTime.value = index.startTime
        endTime.value = index.endTime
    }

    console.log(itemRangeFive.value, '1111', itemRangeSix.value, '2222222')
    await longAllCount()
}

onMounted(async () => {
    await user.waitLogin()
    const nowyear = new Date().getFullYear()
    const nowmonth = new Date().getMonth() + 1
    startTime.value = formatDate(new Date(nowyear, nowmonth - 1, 1))
    endTime.value = formatDate(new Date(nowyear, nowmonth, 0))
    longCompany()
    LongPlanData()
    longInsurancePlan()
    longAllCount()
    longOhterData()
    longOperateData()
    longStatistics()
    longAtMoney()
    longTrend()
    longOpenTrend()
})
const formatDate = (date: any) => {
    const myyear = date.getFullYear()
    let mymonth = date.getMonth() + 1
    let myweekday = date.getDate()
    if (mymonth < 10) {
        mymonth = "0" + mymonth
    }
    if (myweekday < 10) {
        myweekday = "0" + myweekday
    }
    return (myyear + "-" + mymonth + "-" + myweekday)
}
</script>
<style lang="scss" scoped>
.container {
    // min-height: 100vh;
    background: #fafafc;
    padding-bottom: 89rpx;
}
.tab-box {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tab-radius {
    margin-top: 30rpx;
    padding: 0rpx 30rpx;
}
.scroll {
    height: 100vh;
}
.record-list {
    padding: 0 30rpx;
    margin-top: 34rpx;
    .record-i {
        padding: 30rpx;
        background: #ffffff;
        border-radius: 16rpx;
    }
    .info-row {
        display: flex;
    }
    .info-row-left {
        width: 138rpx;
        color: $grey;
        font-size: $font-normal;
        margin-bottom: 17rpx;
    }
    .info-row-right {
        color: $black;
        font-size: $font-normal;
        margin-bottom: 17rpx;
    }
}

// 销售记录列表
.sale-list {
    padding: 30rpx;
    .sale-time {
        display: flex;
        align-items: center;
    }
    .sale-fixed-width {
        width: 42rpx;
    }
    .decorate-time {
        width: 29rpx;
        height: 29rpx;
        border: 2px solid #dee0e3;
        border-radius: 50%;
        @include flex-center;
    }
    .decorate-within {
        width: 15rpx;
        height: 15rpx;
        background: #dee0e3;
        border-radius: 50%;
    }
    .time {
        color: $black;
        font-size: $font-normal;
    }
    .sale-content {
        margin: 13rpx 0 13rpx 18rpx;
        border-left: 1rpx solid #dee0e3;
        display: flex;
        align-items: center;
        padding-left: 25rpx;
    }
    .sale-line {
        height: 100%;
    }
    .sale-content-box {
        padding: 25rpx 0;
        flex: 1;
        .box {
            padding: 30rpx;
            background: #ffffff;
            border-radius: 16rpx;
        }
        .row-i {
            color: $grey;
            font-size: $font-normal;
        }
        .row-i-active {
            margin-bottom: 24rpx;
        }
        .num {
            color: $black;
            font-size: $font-normal;
        }
    }
}
.operate {
    padding: 30rpx;
    background: #ffffff;
    border-radius: 16rpx;
    .operate-screen {
        .title {
            color: #202536;
            font-size: $font-normal;
        }
    }
    .screen-i {
        border-radius: 8rpx;
        border: 1rpx solid #dee0e3;
        padding: 12rpx 15rpx;
        color: #565868;
        font-size: $font-base;
    }
    .drop-down {
        width: 22rpx;
        height: 20rpx;
    }
    .box-list {
        @include flex-between;
        flex-wrap: wrap;
        margin: 30rpx 0 30rpx 0;
    }
    .block-box-i {
        width: calc(100% / 2.6);
        background: #f4f4f7;
        padding: 23rpx 0 23rpx 30rpx;
        border-radius: 16rpx;
        .title {
            color: #565868;
            font-weight: bold;
        }
        .num {
            color: $black;
            font-weight: bold;
            font-size: $font-large;
            margin-top: 10rpx;
        }
        .company {
            font-size: $font-small;
        }
    }
    .block-box-i-active {
        flex: 1;
    }
}
.operate-top {
    margin: 30rpx 0;
    .operate-title {
        .title {
            color: $black;
            font-size: $font-normal;
        }
    }
    .operate-chart {
        margin-top: 52rpx;
        height: 400rpx;
    }
    .qiun-data-charts {
        height: 400rpx;
        width: 200rpx;
    }
    .qiun-data-charts-bg {
        background: #fafafc;
        margin-top: 30rpx;
        border-radius: 16rpx;
        padding: 10rpx 10rpx;
    }
    .operate-table {
        margin-top: 20rpx;
        .table-title {
            border: 16rpx 16rpx;
        }
        .title {
            width: calc(100% / 3);
            text-align: center;
            height: 88rpx;
            line-height: 88rpx;
            background: #f4f4f7;
        }
        .cell {
            width: calc(100% / 3);
            text-align: center;
            height: 88rpx;
            line-height: 88rpx;
            background: #fafafc;
            color: #565868;
        }
        .cell-active {
            display: flex;
            align-items: center;
        }
        .colour-block {
            border-radius: 4rpx;
            width: 16rpx;
            height: 16rpx;
            margin: 0 12rpx 0 30rpx;
        }
    }
}
.fatalism {
    font-size: $font-base;
    padding: 12rpx 10rpx;
}
.fatalism-margin {
    margin-right: 0rpx;
}
.parallel {
    margin-top: 16rpx;
    color: $grey;
    font-size: $font-base;
    .ratio {
        color: $green;
        margin-left: 8rpx;
    }
  .variety {
    color: #ff7642;
  }
}

.parallel-entire {
    margin: 16rpx 0 0 40rpx;
    color: $grey;
    font-size: $font-base;
    .ratio {
        color: $green;
        margin-left: 8rpx;
    }
  .variety {
    color: #ff7642;
  }
}
// .jamb {
//     margin-left: 27rpx;
// }

.insurance-data {
    padding-bottom: 30rpx;
}

.reduce-color {
    background: #ff7642;
}
.interval-box{
	margin-top: 20rpx;
}
.charts-box{
	margin-top: 20rpx;
	background: #FAFAFC;
	padding: 10rpx;
}
.interval {
    border-radius: 1rpx solid #dee0e3;
    border-radius: 5rpx;
    overflow: hidden;
	padding-top: 0rpx;
    .interval-i {
        padding: 12rpx 25rpx;
        background: #fff;
        border: 1px solid #dee0e3;
        border-radius: 0rpx;
    }
}
.fatalism-row{
  width: 100%;
  justify-content: space-between;
}

.amount{
  background: #EBEFFE!important;
}

.dredge-left{
  padding-right: 27rpx;
}

.row-type{
  align-items: flex-end;
}

.at-type{
  margin-top: 30rpx;
}

.input-hidden{
    width: 100rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
